<template>
	<view class="charts-box">
		<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" v-if="xiaoShouZhanBiData.length > 0"
			:canvasId="canvasId" :canvas2d='true' />
		<view class="kong" v-else>
			<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/car.png" text="暂无数据">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				day: null,
				type: 1,
				xiaoShouZhanBiData: [],
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						},

					},
					legend: {
						show: false,
						fontColor: "#c5ddf5", // 字体颜色
						// padding: 5, // 图例外侧填充边距
						itemGap: 0, // 各个分类（类别）之间的间隔
					},


				},


			};
		},
		onReady() {
			// this.getServerData();
			// this.getDate()
		},
		methods: {
			// 获取当前时间
			async getDate() {
				let D = new Date()
				let year = (D.getFullYear() + '').padStart(2, '0')
				let M = (D.getMonth() + 1 + '').padStart(2, '0')
				let t = (D.getDate() + '').padStart(2, '0')
				this.day = `${year}-${M}-${t}`
				this.getXiaoShouZhanBi()

			},
			// 获取经销商占比饼图数据
			async getXiaoShouZhanBi() {
				const res = await this.$post(`/biz/statistics/xiaoshouzhanbi`, {
					time: this.day,
					type: this.type,
					isAll: 1
				})
				if (res.statusCode == 200) {
					this.xiaoShouZhanBiData = res.data.data.map(items => {
						return {
							name: items.name,
							value: items.percentage * 100,
							labelText: `${items.name}:${(items.percentage * 100).toFixed(2)}%`
						}
					})

					this.getServerData(this.xiaoShouZhanBiData)
				}
			},
			getServerData(val) {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: val
						}]
					};
					this.chartData = this.xiaoShouZhanBiData.length > 0 ? JSON.parse(JSON.stringify(res)) : {};
					// this.chartData = JSON.parse(JSON.stringify(res));
				}, 100);
			},
		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>